<template>
	<view class="seckillBox">
		<view class="bgBox">
			<view class="navTop">
				新人500元大礼包
				<view class="rule" @click="ruleTap">
					活动规则
				</view>
			</view>
			<view class="coupon">
				<view class="head">
					<view class="day">
						<text>06</text>天后过期
					</view>
					<view class="more">
						我的优惠券
						<uni-icons type="arrowright" size="14" ></uni-icons>
					</view>
				</view>
				<view class="couponScroll" >
				<view class="couponinner" >
					<view v-for="(item,index) in couponList" :key="index" class="coupon-item">
						<image src="/static/img/couponbg01.png" mode="scaleToFill" class="coupon-bg"></image>
						<image v-if="item.start" src="/static/img/couponstart01.png" mode="widthFix" class="coupon-start"></image>
						<view class="money">
							¥<text>{{item.money}}</text>.00
						</view>
						<view class="limit">
							满39减10
						</view>
						<view class="type">
							10元补贴券
						</view>
					</view>
				</view>
				</view>
			</view>
		</view>
		<!-- 活动规则弹框 -->
<uni-popup ref="rulePop" type="center">
	<view class="ruleBox">
		<view class="title">活动规则</view>
		<div class="body">
			<p>1、每个新用户仅限参与1次新人优惠券福利。</p><p>2、新用户是指没有在有品提交过订单的用户，同一账号、同一手机号、同一终端设备号或其它合理显示为同一用户的情形，均视为同一用户；</p><p>3、新用户绑定手机号后，方可领取新人礼包优惠券；</p><p>4、首次下单，单笔订单实际支付金额满99元，可获得首单奖励，即满499减50优惠券1张；</p><p>5、新人礼包优惠券总面额不小于500元，不同优惠券有效期及具体使用规则有差异，具体以优惠券结算页面为准，详见【有品app】-【个人】-【优惠券】具体说明；</p><p>6、优惠券数量有限，先到先得，领完即止。</p>
		</div>
		<uni-icons type="close" color="#fff" size="28" class="icons" @click="ruleCloseTap()"></uni-icons>
	</view>
</uni-popup>
		<!-- tab列表 -->
		<scroll-view scroll-with-animation scroll-x class="topTabBar" @scroll="scrollMove" :scroll-left="scrollLeft">
			<view class="innerBox">
				<view class="grid" :class="[tbIndex == tabbarIndex ? 'on' : '']" v-for="(item, tbIndex) in tabType" :key="tbIndex" :id="'ele' + tbIndex" @tap="showType(tbIndex)">
					<view class="text">{{ item.title }}</view>
				</view>
			</view>
		</scroll-view>
		<!-- 商品列表 -->
		<swiper :autoplay="false" :current="currentSwiper" class="swiperBox" :style="{ height: pageHeight + 'px' }" @change="listChange">
			<swiper-item class="swiperItem" v-for="(item, num) in goodsList" :key="num">
				<view v-if="!item.list || item.list.length < 1" class="nodata">没有数据～</view>
				<view class="today-list" v-for="(row, index) in item.list" :key="index">
					<image :src="row.img" mode="widthFix"></image>
					<view class="plank">
						<view class="title">{{ row.title }}</view>
						<text class="cont">{{ row.cont }}</text>
						<view class="tags">
							<view v-for="(val, index2) in row.tags" :key="index2" class="tag">{{ val }}</view>
						</view>
						<view class="footer">
							<view class="leftBox">
								<view class="price">
									<text>¥</text>
									{{ row.price }}
									<text class="oldPrice">¥{{ row.oldPrice }}</text>
								</view>
								<view class="introduce">
									{{ row.comment }}条评论
									<text>{{ row.praise }}%好评</text>
								</view>
							</view>
							<view class="seeBtn" @click="goGoodsInfo(row.id)">立即购买</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
export default {
	data() {
		return {
			pageHeight: 200,
			currentSwiper: 0,
			scrollLeft: '',
			moveParams: {
				scrollLeft: 0, // scroll-view滚动的距离,默认为0,因为没有触发滚动
				subLeft: '', //点击元素距离屏幕左边的距离
				subHalfWidth: '', //点击元素的宽度一半
				screenHalfWidth: '' //屏幕宽度的一半
			},
			tabType: [
				{
					title: '热门推荐'
				},
				{
					title: '智能家庭'
				},
				{
					title: '日用文创'
				},
				{
					title: '家用电器'
				},
				{
					title: '运动户外'
				},
				{
					title: '服装配饰'
				},
				{
					title: '居家餐厨'
				},
				{
					title: '鞋靴箱包'
				}
			],
			tabbarIndex: 0,
			couponList: [
				{
					start:true,
					money:10,
					limit: '满39减10',
					type: '10元补贴券',
				},
				{
					start:true,
					money:10,
					limit: '满39减10',
					type: '10元补贴券',
				},
				{
					start:true,
					money:210,
					limit: '满399减210',
					type: '电子产品券',
				},
				{
					start:true,
					money:10,
					limit: '满39减10',
					type: '10元补贴券',
				},
				{
					start:true,
					money:210,
					limit: '满399减210',
					type: '电子产品券',
				},
				{
					start:true,
					money:10,
					limit: '满39减10',
					type: '10元补贴券',
				},
				{
					start:true,
					money:210,
					limit: '满399减210',
					type: '电子产品券',
				},
				{
					start:true,
					money:10,
					limit: '满39减10',
					type: '10元补贴券',
				},
				{
					start:true,
					money:210,
					limit: '满399减210',
					type: '电子产品券',
				},
				{
					start:true,
					money:10,
					limit: '满39减10',
					type: '10元补贴券',
				},
				{
					start:true,
					money:210,
					limit: '满399减210',
					type: '电子产品券',
				},
			],

			goodsList: [
				{
					list: [
						{
							img: '/static/img/goods/p1.jpg',
							title: '小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
							cont: '高颜值设计，智能米家APP智联高颜值设计，智能高颜值设计，智能高颜值设计，智能',
							tags: ['预售'],
							price: '1999',
							oldPrice: '2399',
							comment: '5212',
							praise: '98'
						},
						{
							img: '/static/img/goods/p2.jpg',
							title: '小米电动滑板车1S',
							cont: '高颜值设计，智能米家APP智联',
							price: '2999',
							oldPrice: '2399',
							comment: '3212',
							praise: '98'
						},
						{
							img: '/static/img/goods/p3.jpg',
							title: '小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
							cont: '高颜值设计，智能米家APP智联',
							tags: ['预售'],
							price: '1999',
							oldPrice: '2399',
							comment: '6212',
							praise: '98'
						},
						{
							img: '/static/img/goods/p4.jpg',
							title: '小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
							cont: '高颜值设计，智能米家APP智联',
							price: '999',
							oldPrice: '2399',
							comment: '8212',
							praise: '98'
						},
						{
							img: '/static/img/goods/p3.jpg',
							title: '小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
							cont: '高颜值设计，智能米家APP智联',
							tags: ['预售'],
							price: '1999',
							oldPrice: '2399',
							comment: '1212',
							praise: '98'
						},
						{
							img: '/static/img/goods/p4.jpg',
							title: '小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
							cont: '高颜值设计，智能米家APP智联',
							price: '999',
							comment: '1212',
							praise: '98'
						}
					]
				},
				{},
				{},
				{},
				{},
				{},
				{},
				{},
			]
		};
	},
	onReady() {
		// 获取屏幕宽度/高度
		this.getScreenWidth();
	},
	methods: {
		goGoodsInfo() {
			uni.navigateTo({
				url: '/pages/goods/goods'
			})
		},
		getScreenWidth() {
			var that = this;
			uni.getSystemInfo({
				success(res) {
					console.log(res);
					let moveParams = that.moveParams;
					moveParams.screenHalfWidth = res.screenWidth / 2;
					that.pageHeight = res.windowHeight - 50;
				}
			});
		},
		getRect(ele) {
			//获取点击元素的信息,ele为传入的id
			var that = this;
			uni
				.createSelectorQuery()
				.select(ele)
				.boundingClientRect(function(rect) {
					let moveParams = that.moveParams;
					moveParams.subLeft = rect.left;
					moveParams.subHalfWidth = rect.width / 2;
					that.moveTo();
				})
				.exec();
		},
		scrollMove(e) {
			let moveParams = this.moveParams;
			moveParams.scrollLeft = e.detail.scrollLeft;
			this.moveParams = moveParams;
		},
		moveTo() {
			let subLeft = this.moveParams.subLeft;
			let screenHalfWidth = this.moveParams.screenHalfWidth;
			let subHalfWidth = this.moveParams.subHalfWidth;
			let scrollLeft = this.moveParams.scrollLeft;
			let distance = subLeft - screenHalfWidth + subHalfWidth;
			scrollLeft = scrollLeft + distance;
			this.scrollLeft = scrollLeft;
		},
		// tab切换
		showType(tbIndex) {
			this.tabbarIndex = tbIndex;
			let ele = 'ele' + tbIndex;
			this.getRect('#' + ele);
			// this.list = this.orderList[tbIndex];
			this.currentSwiper = tbIndex;
		},
		listChange(event) {
			let newIndex = event.detail.current;
			this.currentSwiper = newIndex;
			this.showType(newIndex);
		},
		ruleTap() {
			this.$refs.rulePop.open()
		},
		ruleCloseTap() {
			this.$refs.rulePop.close()
		},
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #f4f4f4;
}

.seckillBox {
	// position: relative;
	.bgBox {
		position: relative;
		top: -10upx;
		background-color: #fcedd3;
		width: 100%;
		height: 650upx;
		.navTop {
			position: absolute;
			height: 80upx;
			left: 0;
			right: 0;
			text-align: center;
			height: 100upx;
			line-height: 100upx;
			color: #ec6748;
			font-size: 39upx;
			font-weight: bold;
			.rule {
				position: absolute;
				font-size: 28upx;
				font-weight: 400;
				color: #974d1f;
				height: 40upx;
				line-height: 40upx;
				padding: 0 20upx;
				border-radius: 20upx 0 0 20upx;
				background-color: #fadf90;
				top: 50%;
				transform: translateY(-50%);
				right: 0;
			}
		}
	}
	.ruleBox {
		background-color: #e7e2ea;
		border-radius: 30upx;
		padding: 20upx;
		margin: 0 50upx;
		.title {
			text-align: center;
			font-size: 38upx;
		}
		p {
			font-size: 30upx;
			padding: 10upx 0;
			color: #666;
		}
		.icons {
			position: absolute;
			bottom: -100upx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
	.coupon {
		position: absolute;
		top: 100upx;
		left: 20upx;
		right: 20upx;
		
		.head {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.day {
				font-size: 32upx;
			text {
				background-color: #ee9368;
				color: #fff;
				font-size: 30upx;
				font-weight: bold;
				padding: 5upx;
			}
			}
			.more {
				font-size: 30upx;
			}
		}
		.couponScroll {
			margin-top: 20upx;
			overflow: 100%;
			overflow: auto;
			.couponinner {
				flex-wrap: wrap;
				width: 1420upx;
				display: flex;
				overflow: auto;
			}
		.coupon-item {
			flex-shrink: 0;
			display: inline-block;
			margin-right: 20upx;
			margin-bottom: 20upx;
			position: relative;
			width: 220upx;
			height: 150upx;
			color: #fff;
			&:nth-child(6n) {
				margin-right: 0;
			}
			.coupon-bg {
				width: 100%;
				height: 100%;
				z-index: 0;
			}
			.coupon-start {
				position: absolute;
				top: 0;
				right: 0;
				width: 100upx;
			}
			.money {
				position: absolute;
				top: 15upx;
				left: 20upx;
				
				text {
					font-size: 50upx;
				}
			}
			.limit {
				position: absolute;
				top: 70upx;
				left: 20upx;
				font-size: 26upx;
			}
			.type {
				position: absolute;
				top: 100upx;
				left: 20upx;
				font-size: 26upx;
			}
		}
	}
	}
}
// tab切换
.topTabBar {
	width: 95%;
	margin: 0upx auto;
	margin-top: -150upx;
	// background-color: #fff;
	height: 70upx;
	display: flex;
	overflow: auto;
	.innerBox {
		display: flex;
		.grid {
			flex: 1;
			min-width: 25%;
			height: 50upx;
			font-size: 30upx;
			text-align: center;
			flex-shrink: 0;
			transition: all 0.2s ease;
			color: #999;
			opacity: 0.6;
			.text {
				height: 50upx;
				line-height: 50upx;
			}
			.cont {
				font-size: 24upx;
			}
			&.on {
				font-size: 36upx;
				font-weight: bold;
				color: #e5412e;
				opacity: 1;
				.cont {
					font-size: 24upx;
					border-radius: 20upx;
					background-color: #f0aa1d;
				}
			}
		}
	}
}

// 列表展示
.swiperBox {
	margin: 20upx 0;
	margin-top: -10upx;
	border-radius: 30upx;
	background-color: #fff;
	overflow: hidden;
	.swiperItem {
		background-color: #fff;
		// padding: 20upx;
		overflow: auto;
		border-radius: 30upx;
		
		.nodata {
			margin-top: 50upx;
			text-align: center;
		}
		.today-list {
			background-color: #fff;
			display: flex;
			margin-bottom: 20upx;
			padding: 20upx;
			border-radius: 30upx;
			&:last-child {
				margin-bottom: 0upx;
			}
			image {
				width: 220upx;
				height: 220upx;
				flex-shrink: 0;
				display: block;
				border-radius: 20upx;
			}
			.plank {
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				// justify-content: space-between;
				height: 220upx;
				margin-left: 20upx;
				overflow: hidden;
				.title {
					font-size: 32upx;
					margin-bottom: 10upx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.cont {
					display: inline-block;
					min-width: 10upx;
					color: #666;
					font-size: 28upx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.tags {
					display: flex;
					.tag {
						color: #fff;
						width: 60upx;
						text-align: center;
						flex-shrink: 0;
						margin: 5upx;
						flex-grow: 0;
						padding: 5upx;
						background-color: #cc463c;
						font-size: 20upx;
						border-radius: 5upx;
					}
				}
				.footer {
					margin-top: auto;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.leftBox {
						.price {
							font-size: 38upx;
							font-weight: bold;
							color: #ff0000;
							text {
								font-size: 28upx;
								font-weight: 400;
							}
							.oldPrice {
								margin-left: 20upx;
								color: #999;
								text-decoration: line-through;
								font-size: 30upx;
							}
						}
						.introduce {
							font-size: 28upx;
							color: #999;
							text {
								margin-left: 20upx;
							}
						}
					}
					.seeBtn {
						font-size: 26upx;
						padding: 10upx 20upx;
						border-radius: 50upx;
						color: #fff;
						background: linear-gradient(to right, #ee7941, #ea4f51);
					}
				}
			}
		}
	}
}
</style>
